<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .update-ipt {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="user-info">
        <li>
            用户名:<span></span> <input type="text" name="" id="" class="update-ipt">
        </li>
        <li>
            昵称:<span></span> <input type="text" name="" id="" class="update-ipt">
        </li>
        <li>
            性别:<span></span> <input type="text" name="" id="" class="update-ipt">
        </li>
        <li>
            年龄:<span></span> <input type="text" name="" id="" class="update-ipt">
        </li>
    </ul>
    <button id="updateBtn">修改</button>
    <button id="saveBtn" onclick="saveUserInfo()">保存</button>


    <div>
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <button>修改密码</button>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="./request.js"></script>
    <script>
        // 调用修改接口展示内容
        function loadUserInfo() {
            let userInfoAPI = '/users/info';
            let uid = localStorage.getItem('uid')
            http.get(userInfoAPI + '/' + uid).then(r => {
                console.log(r.data);
                let { info } = r.data;
                let userInfoSpanArr = document.querySelectorAll(".user-info span");
                // userInfoSpanArr[0].innerHTML = info.username;
                // userInfoSpanArr[1].innerHTML = info.nickname;
                // userInfoSpanArr[2].innerHTML = info.gender;
                // userInfoSpanArr[3].innerHTML = info.age;

                let str = `
            <li>
            用户名:<span>${info.username}</span> <input disabled value="${info.username}" type="text" name="" id="" class="update-ipt">
            </li>
            <li>
                昵称:<span>${info.nickname}</span> <input value="${info.nickname}" type="text" name="" id="" class="update-ipt">
            </li>
            <li>
                性别:<span>${info.gender}</span> <input value="${info.gender}" type="text" name="" id="" class="update-ipt">
            </li>
            <li>
                年龄:<span>${info.age}</span> <input value="${info.age}" type="text" name="" id="" class="update-ipt">
            </li>
            `
                document.querySelector(".user-info").innerHTML = str;;

                // 编辑按钮-添加点击事件
                let updateBtn = document.querySelector("#updateBtn")
                updateBtn.onclick = function () {
                    document.querySelectorAll(".user-info span").forEach(v => v.style.display = 'none')
                    document.querySelectorAll(".user-info input").forEach(v => v.style.display = 'inline-block')

                }

            })
        }


        // 保存 用户信息
        async function saveUserInfo() {
            let updateUserInfoAPI = '/users/update';
            let id = localStorage.getItem('uid');
            // 获取编辑 输入框的内容
            let updateIptArr = document.querySelectorAll('.update-ipt')
            let age = updateIptArr[3].value;
            let gender = updateIptArr[2].value;
            let nickname = updateIptArr[1].value;

            // 发起修改请求--接口参数 参见接口文档
            let r = await http.post(updateUserInfoAPI, { age, gender, nickname, id });
            console.log(r.data);

            // 
            // document.querySelectorAll(".user-info span").forEach(v => v.style.display = 'inline-block')
            // document.querySelectorAll(".user-info input").forEach(v => v.style.display = 'none')

            loadUserInfo()




        }


        loadUserInfo()
    </script>

</body>

</html>